function prepareCanvas(canvasDiv, canvasWidth, canvasHeight) {
	// Create the canvas (Neccessary for IE because it doesn't know what a canvas element is)
	canvas = document.createElement('canvas');
	canvas.setAttribute('width', canvasWidth);
	canvas.setAttribute('height', canvasHeight);
	canvas.setAttribute('id', 'canvas');
	canvasDiv.appendChild(canvas);
	if ( typeof G_vmlCanvasManager != 'undefined') {
		canvas = G_vmlCanvasManager.initElement(canvas);
	}
	context = document.getElementById('canvas').getContext("2d");
	//loadImage here
}

var images = {};
// Add in prepareCanvas Function
loadImage("leftArm");
loadImage("legs");
loadImage("torso");
loadImage("rightArm");
loadImage("head");
loadImage("hair");
loadImage("leftArm-jump");
loadImage("legs-jump");
loadImage("rightArm-jump");

function loadImage(name) {
	images[name] = new Image();
	images[name].onload = function() {
		resourceLoaded();
	};
	images[name].src = "images/" + name + ".png";
}

// To know when all of the images are loaded so we can begin drawing
var totalResources = 9;
var numResourcesLoaded = 0;
var fps = 30;
function resourceLoaded() {
	numResourcesLoaded += 1;
	if (numResourcesLoaded === totalResources) {
		setInterval(redraw, 1000 / fps);
	}
}

var charX = 245;
var charY = 185;

function redraw() {
	var x = charX;
	var y = charY;
	var jumpHeight = 45;

	canvas.width = canvas.width;
	// clears the canvas
	// Draw shadow
	if (jumping) {
		drawEllipse(x + 40, y + 29, 100 - breathAmt, 4);
	} else {
		drawEllipse(x + 40, y + 29, 160 - breathAmt, 6);
	}
	if (jumping) {
		y -= jumpHeight;
	}
	if (jumping) {
		context.drawImage(images["leftArm-jump"], x + 40, y - 42 - breathAmt);
	} else {
		context.drawImage(images["leftArm"], x + 40, y - 42 - breathAmt);

	}
	if (jumping) {
		context.drawImage(images["legs-jump"], x, y - 6);
	} else {
		context.drawImage(images["legs"], x, y);
	}
	context.drawImage(images["torso"], x, y - 50);
	context.drawImage(images["head"], x - 10, y - 125 - breathAmt);
	context.drawImage(images["hair"], x - 37, y - 138 - breathAmt);
	if (jumping) {
		context.drawImage(images["rightArm-jump"], x - 35, y - 42 - breathAmt);
	} else {
		context.drawImage(images["rightArm"], x - 15, y - 42 - breathAmt);
	}

	drawEllipse(x + 47, y - 68 - breathAmt, 8, curEyeHeight);
	drawEllipse(x + 58, y - 68 - breathAmt, 8, curEyeHeight);

}

function drawEllipse(centerX, centerY, width, height) {
	context.beginPath();
	context.moveTo(centerX, centerY - height / 2);
	context.bezierCurveTo(centerX + width / 2, centerY - height / 2, centerX + width / 2, centerY + height / 2, centerX, centerY + height / 2);
	context.bezierCurveTo(centerX - width / 2, centerY + height / 2, centerX - width / 2, centerY - height / 2, centerX, centerY - height / 2);
	context.fillStyle = "black";
	context.fill();
	context.closePath();
}

var breathInc = 0.1;
var breathDir = 1;
var breathAmt = 0;
var breathMax = 2;
var breathInterval = setInterval(updateBreath, 1000 / fps);
function updateBreath() {
	if (breathDir === 1) {// breath in
		breathAmt -= breathInc;
		if (breathAmt < -breathMax) {
			breathDir = -1;
		}
	} else {// breath out
		breathAmt += breathInc;
		if (breathAmt > breathMax) {
			breathDir = 1;
		}
	}
}

var maxEyeHeight = 14;
var curEyeHeight = maxEyeHeight;
var eyeOpenTime = 0;
var timeBtwBlinks = 4000;
var blinkUpdateTime = 200;
var blinkTimer = setInterval(updateBlink, blinkUpdateTime);

function updateBlink() {
	eyeOpenTime += blinkUpdateTime;
	if (eyeOpenTime >= timeBtwBlinks) {
		blink();
	}
}

function blink() {
	curEyeHeight -= 1;
	if (curEyeHeight <= 0) {
		eyeOpenTime = 0;
		curEyeHeight = maxEyeHeight;
	} else {
		setTimeout(blink, 10);
	}
}

var jumping = false;
function jump() {
	if (!jumping) {
		jumping = true;
		setTimeout(land, 500);
	}
}

function land() {
	jumping = false;
}



